<template>
    <el-card class="box-card" shadow="never">
        <!-- <template #header>
                <div class="card-header">
                    <span>AQI指数趋势统计</span>
                    <el-button class="button" @click="init" text>刷新</el-button>
                </div>
            </template>
<div class="content">
    <el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName">
        <el-table-column prop="id" label="#" />
        <el-table-column prop="months" label="月份" />
        <el-table-column prop="nums" label="AQI空气质量指数超标数量" />
    </el-table> -->
        <div ref="chartRef" id="chartSort" class="chart-container"></div>
        <!-- </div> -->
    </el-card>
</template>

    <script setup>
    import { ref, onMounted, onUnmounted } from 'vue'
    import $axios from '../../../utils/axios'
    import * as echarts from 'echarts'

    const tableData = ref([])
    const chartRef = ref(null)
    let chart = null

    // 定义初始化echarts图表的方法
    const initChart = (chartData) => {
        if (!chartRef.value) {
            console.error('找不到图表容器')
            return
        }

        // 如果已经有图表实例，先销毁它
        if (chart) {
            chart.dispose()
            chart = null
        }

        try {
            // 初始化图表
            chart = echarts.init(chartRef.value)

            // 配置图表
            const options = {
                title: {
                    text: '活动排行榜',
                    left: 'center',
                    top: 20
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    bottom: '15%',
                    left: '10%',
                    right: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: chartData.map(item => item.activityName),
                    axisLabel: {
                        rotate: -30,
                        interval: 0,
                        formatter: function (value) {
                            return value.length > 12 ? value.substring(0, 12) + '...' : value
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '报名人数',
                    nameTextStyle: {
                        padding: [0, 0, 0, 40]
                    }
                },
                series: [
                    {
                        name: '报名人数',
                        type: 'bar',
                        data: chartData.map(item => item.signedUpNum),
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#83bff6' },
                                { offset: 0.5, color: '#409EFF' },
                                { offset: 1, color: '#188df0' }
                            ])
                        },
                        emphasis: {
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    { offset: 0, color: '#66b1ff' },
                                    { offset: 0.7, color: '#409EFF' },
                                    { offset: 1, color: '#0d84ff' }
                                ])
                            }
                        }
                    }
                ]
            }

            // 设置图表配置项
            chart.setOption(options)

            // 添加窗口大小改变的监听
            window.addEventListener('resize', handleResize)
        } catch (error) {
            console.error('图表初始化失败:', error)
        }
    }

    // 处理窗口大小改变
    const handleResize = () => {
        if (chart) {
            chart.resize()
        }
    }

    const init = async () => {
        try {
            // 获取统计数据
            const path = '/count/countActivitySort'
            const { data: res } = await $axios.get(path)
            if (res.code === 200) {
                tableData.value = res.result
                console.log('活动排行榜数据:', res.result)
                // 等待 DOM 更新完成
                setTimeout(() => {
                    initChart(res.result)
                }, 100)
            }
        } catch (error) {
            console.error('获取数据失败:', error)
        }
    }

    onMounted(() => {
        init()
    })

    onUnmounted(() => {
        // 移除窗口大小改变的监听
        window.removeEventListener('resize', handleResize)
        // 销毁图表实例
        if (chart) {
            chart.dispose()
            chart = null
        }
    })
</script>
    <style scoped>
    .container {
        display: flex;
        height: 95%;
    }

    .box-card {
        width: 100%;
        height: 100%;
        /* margin-top: 12px; */
        /* border-radius: 12px; */
    }


    .echarts-container {
        width: 100%;
        height: 50vh;
        min-height: 300px;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .content {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        width: 100%;
    }

    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }


    #chart-container {
        width: 50%;
        height: 300px;
        margin-top: 12px;
    }
</style>

    <style>
    .el-table .success-row {
        --el-table-tr-bg-color: var(--el-color-success-light-9);
    }
</style>